// import { container } from "webpack"
import React, { render, Component } from "./react"
const root = document.getElementById("root")
const jsx = (
    <div id="a1">
        <div id="b1">
            <div id="c1"></div>
            <div id="c2"></div>
        </div>
        <div id="b2"></div>
    </div>
)
// 构建跟元素的fiber对象
const workInProgressRoot = {
    stateNode: root,
    props: {
        children: [jsx]
    }
}
// 下一个要执行的任务
let nextUnitOfWork = workInProgressRoot
function workLoop(deadline) {
    // 1，是否有空余时间
    // 2，是否有要执行的任务
    while (nextUnitOfWork && deadline.timeRemaining() > 0) {
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
    }
    // 表示所有任务都已经完成
    if (!nextUnitOfWork) {
        // 进入到第二个阶段 执行DOM
        commitRoot()
    }
}
function performUnitOfWork(workInProgressFiber) {
    // 1. 创建DOM对象并将它存储在 stateNode 属性
    // 2. 构建当前 Fiber 的子级 Fiber
    beginWork(workInProgressFiber)
    if (workInProgressFiber.child) {
        return workInProgressFiber.child
    }

    while (workInProgressFiber) {
        // 构建链表
        completeUnitOfWork(workInProgressFiber)
        // 如果有同级
        if (workInProgressFiber.sibling) {
            // 返回同级，构建同级的子级
            return workInProgressFiber.sibling
        }
        //  更新父级
        workInProgressFiber = workInProgressFiber.return
    }
}
function beginWork(workInProgressFiber) {
    // 1. 创建 DOM 对象并将它存储在 stateNode 属性
    if (!workInProgressFiber.stateNode) {
        // 创建DOM
        workInProgressFiber.stateNode = document.createElement(workInProgressFiber.type)
        // 为 DOM 添加属性
        for (let attr in workInProgressFiber.props) {
            if (attr !== 'children') {
                workInProgressFiber.stateNode[attr] = workInProgressFiber.props[attr]
            }
        }
    }
    // 2. 构建当前 Fiber 的子级 Fiber
    if (Array.isArray(workInProgressFiber.props.children)) {
        let previousFiber = null
        workInProgressFiber.props.children.forEach((child, index) => {
            let childFiber = {
                type: child.type,
                props: child.props,
                effectTag: "PLACEMENT",
                return: workInProgressFiber
            }
            if (index === 0) {
                workInProgressFiber.child = childFiber
            } else {
                previousFiber.sibling = childFiber
            }
            previousFiber = childFiber
        })
    }

    // console.log(workInProgressFiber)
}
function completeUnitOfWork(workInProgressFiber) {
    // 获取当前 Fiber的父级
    const retuenFiber = workInProgressFiber.return
    // 父级是否存在
    if (retuenFiber) {
        if (workInProgressFiber.effectTag) {
            if (!retuenFiber.lastEffect) {
                retuenFiber.lastEffect = workInProgressFiber.lastEffect
            }
            if (!retuenFiber.firstEffect) {
                retuenFiber.firstEffect = workInProgressFiber.firstEffect
            }
            if (retuenFiber.lastEffect) {
                retuenFiber.lastEffect.nextEffect = workInProgressFiber
            } else {
                retuenFiber.firstEffect = workInProgressFiber
            }
            retuenFiber.lastEffect = workInProgressFiber
        }
    }

}
function commitRoot() {
    let currentFiber = workInProgressRoot.firstEffect
    console.log(currentFiber)
    while(currentFiber){
        currentFiber.return.stateNode.appendChild(currentFiber.stateNode)
        currentFiber = currentFiber.nextEffect
    }
}
requestIdleCallback(workLoop)
// function render1(vdom, container) {
//     // 创建元素
//     let element = document.createElement(vdom.type)
//     // 为元素添加属性
//     Object.keys(vdom.props).filter(name=>name!=="children").forEach((name)=> element[name] = vdom.props[name])
//     // 递归创建子元素
//     if(Array.isArray(vdom.props.children)){
//         vdom.props.children.forEach((item)=>render1(item,element))
//     }
//     // 将元素追加到父级
//     container.appendChild(element)
// }
// render1(jsx, root)
// render(jsx, root)
// setTimeout(() => {
//     const jsx = (
//         <div>
//             {/* <div>加油</div> */}
//             <h1>加油</h1>
//         </div>
//     )
//     render(jsx, root)

// }, 2000)
// class Greating extends Component {
//     constructor(props){
//         super(props)
//         this.state = {
//             name:"张三"
//         }
//     }
//     render (){
//         return <div>{this.props.title}hhhqhqhqh{this.state.name}
//            <button onClick={()=>this.setState({name:"李四"})}>点击</button>
//         </div>
//     }
// }
// render(<Greating title="加油"/>,root)
// function FnComponent(props){
//     return <div>{props.title}FnComponent</div>
// }
// render(<FnComponent title="hello"/>,root)